import React, { Component } from 'react';
import {
	TouchableOpacity,
	TextInput,
	StyleSheet,
	View,
	Text,
	Dimensions,ScrollView
} from 'react-native';
import MapView, { Marker } from 'react-native-maps';

//https://snack.expo.io
export default class HelpInfo extends Component {
	constructor(props) {
		super(props);
		this.state = {
			
		};
	}

	render() {
		return (
			<ScrollView>
                      <View style={{padding:10,backgroundColor:'white',}} >
			<View style={styles.center}>
				<Text style={{fontSize:18,fontWeight:'600'}}>HelpInfo</Text>
			</View>
			<View style={styles.mt1}>
				<Text>October 13, 2020 </Text>
			</View>
			
			<View style={styles.mt1}>
				<Text> 1. Home()
a. This component is housed within App.js which will be the entry screen when
using the app</Text>
			</View>
			<View style={styles.mt1}>
				<Text>2. StackNavigator()
a. This layout for the app will put Home and the other tab navigators as part of the
stack (so 2 entities on the stack). The stack will house the inner app tab navigators
and Home. A back arrow will allow for movement from these views allowing for
logout after the user types correct info from Home screen for login.</Text>
			</View>

			<View style={styles.mt1}>
				<Text>Name: Home Screen </Text>
			</View>
			<View style={styles.mt1}>
				<Text>1. ViewInfoButton()
a. This button controls viewing the AboutInfo modal for about and disclaimer info. </Text>
			</View>
			<View style={styles.mt1}>
				<Text>2. ViewMapButton()
a. This button controls viewing the world incident map.</Text>
			</View>
			<View style={styles.mt1}>
				<Text>3. CreateReportButton()
a. This button controls for getting to the create report screen where users can create
an incident report to the map.</Text>
			</View>
			<View style={styles.mt1}>
				<Text>4. Tab Navigator()
a. This layout for the app will have Report tab and Map tab</Text>
			</View>
			<View style={styles.mt1}>
				<Text>Name: Report Screen</Text>
			</View>
			<View style={styles.mt1}>
				<Text>1. IncidentDropdown()
a. This dropdown element will provide the user with incident options to pick from.</Text>
			</View>
			<View style={styles.mt1}>
				<Text>2. IncidentDetailsDropdown()
a. This dropdown element will provide the user with incident response detail options
to pick from.</Text>
			</View>
			<View style={styles.mt1}>
				<Text> 3. LocationSearchBar()
a. This location search bar which will be utilizing Google API location search, the
user will select this location and when submitting the report save this location
query string to post on the map</Text>
			</View>
			<View style={styles.mt1}>
				<Text> 4. ReportSubmitButton()
a. This button controls submission of the report form.</Text>
			</View>
			<View style={styles.mt1}>
				<Text> Name: Incident Modal</Text>
			</View>
			<View style={styles.mt1}>
				<Text>1. String IncidentReported
a. This will be the selected Incident type reported for view on this confirmation
modal “x incident reported!” </Text>
			</View>
			<View style={styles.mt1}>
				<Text>2. Ok Button
a. This button will just serve to give update of status to the user that their report has
been submitted and posted to the map view</Text>
			</View>
			{/* <View style={styles.mt1}>
				<Text></Text>
			</View>
			<View style={styles.mt1}>
				<Text></Text>
			</View>
			<View style={styles.mt1}>
				<Text></Text>
			</View> */}

				</View>

            
            </ScrollView>
		);
	}
}

const styles = StyleSheet.create({
	mt1:{
		marginTop:10
	},
	mt:{
		marginTop:20
	},
	in_bg:{
		width:310,
		height:50,
		backgroundColor:'white',color:'red',padding:5
	},
	input:{
		width:300,
		// height:50
	},
	add_btn:{
		width:300,
		backgroundColor:'#1E90FF',
		padding:10,
		marginTop:30,
		color:'#FFFFFF',
		fontSize:20
		
	},
	centeredView: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
		marginTop: 22
	},
	md: {
		width: 200,
		height: 500
	},
	btn: {
		backgroundColor: 'white',
		width: 300,
		height: 30,
		borderRadius: 5,
		fontSize: 18,
		fontWeight: '500'
	},
	center: {
		alignItems: 'center',
		justifyContent: 'center'

	}

})

